<!-- 数据图表的组件 -->
<template>
  <div id="main"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { EChartsOption, init } from "echarts";
import { onMounted } from "vue";
import { chartGet } from "../../../api/running";
import { useRuning } from "../../../store/running";
onMounted(() => {
  let run = useRuning();
  type EChartsOption = echarts.EChartsOption;
  let chartDom = document.getElementById("main")!;
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;
  option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: run.regionList,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: run.timeList,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: run.regionList[0],
        type: "line",
        stack: "Total",
        data: run.runList,
      },
    ],
  };
  option && myChart.setOption(option);
});
</script>

<style scoped>
#main {
  width: 900px;
  height: 400px;
}
</style>
